<template>
  <div>
    <el-card class="el-card">
      <!--条件搜索-->
      <el-form ref="ruleQueryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input
            placeholder="请输入菜单名称"
            clearable
            size="default"
            v-model="queryParams.menu_name"
          />
        </el-form-item>
        <el-form-item label="菜单状态" prop="menu_status">
          <el-select
            aria-placeholder="请选择菜单状态"
            size="default"
            v-model="queryParams.menu_status"
          >
            <el-option
              v-for="item in StatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="querySearch">
            <template #icon>
              <i-ep-search />
            </template>
            查询
          </el-button>
          <el-button @click="resetQueryForm">
            <template #icon>
              <i-ep-refresh />
            </template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <!--操作按钮-->
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button
            v-if="hasPermission('api.sysMenu.store')"
            plain
            type="primary"
            @click="handCreate"
          >
            <template #icon>
              <i-ep-plus />
            </template>
            新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button plain type="primary" @click="toggleExpandAll">
            <template #icon>
              <i-ep-sort />
            </template>
            <span v-if="tableData.isExpandAll">折叠</span>
            <span v-else>展开</span>
          </el-button>
        </el-col>
      </el-row>
      <!--列表-->
      <el-table
        border
        stripe
        class="w-full"
        header-cell-class-name="text-[#606266] !bg-[#eef1f6]"
        v-loading="tableData.loading"
        :data="tableData.data"
        v-if="tableData.refreshTable"
        row-key="menu_id"
        :default-expand-all="tableData.isExpandAll"
        :tree-props="{ children: 'childrenList' }"
      >
        <template #empty>
          <el-empty :image-size="100" description="暂无数据" />
        </template>
        <el-table-column
          label="ID"
          header-align="center"
          v-if="false"
          prop="menu_id"
        />
        <el-table-column
          header-align="left"
          label="菜单名称"
          prop="menu_name"
        />
        <el-table-column
          header-align="center"
          align="center"
          label="图标"
          prop="icon"
        >
          <template #default="scope">
            <i :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="排序"
          prop="sort"
        />
        <el-table-column header-align="left" label="权限标识" prop="value" />
        <el-table-column header-align="left" label="组件路径" prop="url" />
        <el-table-column
          header-align="center"
          align="center"
          label="菜单类型"
          prop="menu_type"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.menu_type === 1" type="info">目录</el-tag>
            <el-tag v-else-if="scope.row.menu_type === 2" type="success">
              菜单
            </el-tag>
            <el-tag v-else-if="scope.row.menu_type === 3" type="danger">
              按钮
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          label="菜单状态"
          align="center"
          prop="menu_status"
        >
          <template #default="scope">
            <el-tag v-if="scope.row.menu_status === 2" type="success">
              启用
            </el-tag>
            <el-tag v-else-if="scope.row.menu_status === 1" type="danger">
              禁用
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="创建时间"
          prop="create_time"
        />
        <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          label="操作"
          width="190"
        >
          <template #default="scope">
            <el-button
              v-if="hasPermission('api.sysMenu.show')"
              type="primary"
              class="!ml-0"
              text
              @click="handUpdate(scope.row)"
            >
              <template #icon>
                <i-ep-edit />
              </template>
              编辑
            </el-button>
            <el-button
              v-if="hasPermission('api.sysMenu.destroy')"
              type="danger"
              class="!ml-0"
              text
              @click="handDestroy(scope.row)"
            >
              <template #icon><i-ep-delete /></template>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <RuleModel
    v-model:dialogVisible="dialogVisible"
    :menu_id="menu_id"
    @success="handleSuccess"
  />
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import { StatusList } from './rule.data'
import { ruleItem } from '@/api/auth/model/ruleModel'
import { useForm } from '@/hooks/index'
import { getRuleList, destroy } from '@/api/auth/rule'
import handleTree from '@/utils/tree'
import RuleModel from './ruleModel.vue'
import { usePermission } from '@/hooks/permission'

import { nextTick } from 'vue'

const { resetForm } = useForm()
const { hasPermission } = usePermission()

const ruleQueryFormRef = ref<FormInstance>(null!)
const dialogVisible = ref<boolean>(false)
const menu_id = ref<number>(0)

let queryParams = reactive({
  menu_name: '',
  menu_status: 0,
})

let tableData = reactive({
  loading: true,
  refreshTable: true,
  isExpandAll: false,
  data: [],
})

//获取列表数据
const ruleList = async () => {
  try {
    const { code, data, message } = await getRuleList(queryParams)
    if (code != 200) {
      ElMessage.error(message)
      return
    }
    tableData.data = handleTree.handleTree(
      data,
      'menu_id',
      'parent_id',
      'childrenList'
    ) as never[]
  } finally {
    tableData.loading = false
  }
}
const querySearch = () => {
  ruleList()
}
const resetQueryForm = () => {
  resetForm(ruleQueryFormRef.value)
  ruleList()
}
const toggleExpandAll = () => {
  tableData.refreshTable = false
  tableData.isExpandAll = !tableData.isExpandAll
  nextTick(() => {
    tableData.refreshTable = true
  })
}
const handCreate = () => {
  dialogVisible.value = true
  menu_id.value = 0
}
const handUpdate = (row: ruleItem) => {
  dialogVisible.value = true
  menu_id.value = row.menu_id
}
const handDestroy = (row: ruleItem) => {
  ElMessageBox.confirm(`确定要删除${row.menu_name}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const { code, message } = await destroy({ menu_id: row.menu_id })
      if (code != 200) {
        ElMessage.error(`删除${row.menu_name}${message}`)
        return
      }
      ElMessage.success(`删除${row.menu_name}${message}`)
      ruleList()
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}

const handleSuccess = () => {
  ruleList()
}

onMounted(() => {
  ruleList()
})
</script>

<style scoped></style>
